<div layout="row">
  <md-sidenav md-is-locked-open="$td.isShowFunctionHistory" class="md-sidenav-left md-whiteframe-z1 visual-query-function-history">
    <md-toolbar>
      <div class="md-toolbar-tools" style="font-size: 18px;">Function History</div>
    </md-toolbar>
    <div layout="row" layout-align="center center">
      <md-button class="md-icon-button " ng-click="$td.onUndo()" ng-disabled="$td.canUndo() == false">
        <ng-md-icon icon="undo"></ng-md-icon>
      </md-button>
      <md-button class="md-icon-button " ng-click="$td.onRedo()" ng-disabled="$td.canRedo() == false">
        <ng-md-icon icon="redo"></ng-md-icon>
      </md-button>
    </div>
    <md-list layout-padding browser-height browser-height-offset="{{$td.getBrowserHeightOffset(112)}}">
      <md-list-item ng-repeat-start="history in $td.functionHistory">
        <md-icon>{{history.icon}}</md-icon>
        <p>{{history.name}}<md-tooltip>{{history.name}}</md-tooltip></p>
      </md-list-item>
      <md-divider ng-repeat-end></md-divider>
    </md-list>
  </md-sidenav>

  <md-content style="width: 100%;">
    <md-toolbar>
      <div class="md-toolbar-tools">
        <md-menu hide-gt-md>
          <md-button aria-label="Open formula menu" class="md-icon-button" ng-click="$mdOpenMenu($event)">
            <md-icon md-menu-origin style="color: black;">history</md-icon>
          </md-button>
          <md-menu-content width="2">
            <md-menu-item>
              <md-button ng-click="$td.toggleFunctionHistory()">History<span ng-if="$td.functionHistory.length>0" style="padding-left:10px;">({{$td.functionHistory.length}})</span></md-button>
            </md-menu-item>
            <md-menu-item>
              <md-button ng-click="$td.toggleSampleMenu()">Sample</md-button>
            </md-menu-item>
            <md-menu-item>
              <md-button ng-click="$td.showProfileDialog()">Profile</md-button>
            </md-menu-item>
          </md-menu-content>
        </md-menu>
        <md-button class="md-raised " ng-click="$td.toggleFunctionHistory()" hide show-gt-md>
          History<span ng-if="$td.functionHistory.length>0" hide show-gt-lg style="padding-left:10px;">({{$td.functionHistory.length}})</span>
        </md-button>
        <md-button class="md-raised" ng-click="$td.toggleSampleMenu()" hide show-gt-md>Sample</md-button>
        <md-button class="md-raised" ng-click="$td.showProfileDialog()" ng-disabled="$td.executingQuery" hide show-gt-md>Profile</md-button>
        <span flex></span>
        <md-menu>
          <md-button aria-label="Open formula menu" class="md-icon-button md-primary" ng-click="$mdOpenMenu($event)">
            <md-icon md-menu-origin>functions</md-icon>
          </md-button>
          <md-menu-content width="2">
            <md-menu-item ng-repeat="item in $td.sampleFormulas | orderBy: 'name'">
              <md-button ng-click="$td.setFormula(item.formula)">{{item.name}}</md-button>
            </md-menu-item>
          </md-menu-content>
        </md-menu>
        <div rows="1" class="formula-editor" ui-codemirror="$td.codeMirrorConfig" ng-model="$td.currentFormula" ui-codemirror-opts="$td.codemirrorOptions" style="height: 25px;"></div>
        <md-button class="md-raised md-accent" ng-click="$td.onAddFunction()" ng-disabled="!$td.currentFormula">Add</md-button>
        <span flex></span>
        <thinkbig-step-buttons style="padding:inherit" can-continue="$td.isValid" step-index="{{::$td.stepIndex}}"></thinkbig-step-buttons>
      </div>
    </md-toolbar>

    <div layout="column" layout-fill layout-align="center center" browser-height browser-height-scroll-y="false" browser-height-offset="{{$td.getBrowserHeightOffset(64)}}"
         style="min-height: 0; overflow: hidden; position: relative;">
      <div class="visual-query-sample-menu" layout="column" ng-show="$td.isShowSampleMenu">
        <div layout="row" layout-align="start center">
          <h3>Sampling</h3>
          <span flex></span>
          <md-button class="md-icon-button" ng-click="$td.toggleSampleMenu()"><md-icon>close</md-icon></md-button>
        </div>
        <md-radio-group ng-model="$td.sampleMethod" layout="row" ng-if="!$td.engine.allowLimitWithSample" ng-change="$td.onSampleMethodChange()">
          <md-radio-button value="SAMPLE">Sample</md-radio-button>
          <md-radio-button value="LIMIT">Limit</md-radio-button>
        </md-radio-group>
        <md-input-container layout="row" ng-if="$td.engine.allowLimitWithSample || $td.sampleMethod == 'SAMPLE'">
          <label>Fraction</label>
          <input type="number" ng-model="$td.engine.sample" ng-model-options="{getterSetter: true}">
        </md-input-container>
        <md-input-container layout="row" ng-if="$td.engine.allowLimitWithSample || $td.sampleMethod == 'LIMIT'">
          <label>Limit</label>
          <input type="number" ng-model="$td.engine.limit" ng-model-options="{getterSetter: true}">
        </md-input-container>
        <md-checkbox layout="row" ng-model="$td.engine.shouldLimitBeforeSample" ng-model-options="{getterSetter: true}" aria-label="Should sample?" ng-if="$td.engine.allowLimitWithSample">
          Limit before sampling
        </md-checkbox>
        <div layout="row">
          <md-button class="md-primary md-raised" ng-click="$td.isShowSampleMenu = false; $td.query();">Update</md-button>
        </div>
      </div>

      <md-progress-linear md-mode="query" ng-show="$td.executingQuery && $td.queryProgress == 0" style="position: absolute; top: 0;"></md-progress-linear>
      <md-progress-linear md-mode="determinate" ng-value="$td.queryProgress" ng-show="$td.executingQuery && $td.queryProgress > 0" style="position: absolute; top: 0;"></md-progress-linear>
      <visual-query-table table-columns="$td.tableColumns" table-domain-types="$td.domainTypes" table-rows="$td.tableRows" table-options="$td.tableOptions" table-validation="$td.tableValidation"
                          style="width: 100%; height: 500px;" browser-height browser-height-scroll-y="false" browser-height-offset="{{$td.getBrowserHeightOffset(64)}}"></visual-query-table>
    </div>
  </md-content>
</div>
